.codepen-wrapper[data-codepen-id="bpezow"] *, .codepen-wrapper[data-codepen-id="bpezow"] *:before, .codepen-wrapper[data-codepen-id="bpezow"] *:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.codepen-wrapper[data-codepen-id="bpezow"] html {
height: 100%;
font-size: 10px;
}

.codepen-wrapper[data-codepen-id="bpezow"] body {
display: flex;
background: #9c6da4;
align-items: center;
justify-content: center;
height: 100%;
}
.codepen-wrapper[data-codepen-id="bpezow"] body > * {
vertical-align: middle;
}

.codepen-wrapper[data-codepen-id="bpezow"] #wrapper {
position: relative;
display: inline-block;
width: 80rem;
height: 41.5rem;
margin: 10rem 0;
}

.codepen-wrapper[data-codepen-id="bpezow"] blockquote {
position: absolute;
top: -10rem;
width: 100%;
text-align: center;
color: #462e4a;
font-size: 1.6rem;
font-weight: bold;
font-style: italic;
line-height: 2rem;
text-shadow: 0 1px 0 #ad86b4;
}
.codepen-wrapper[data-codepen-id="bpezow"] blockquote:before {
content: open-quote;
}
.codepen-wrapper[data-codepen-id="bpezow"] blockquote:after {
content: close-quote;
}

.codepen-wrapper[data-codepen-id="bpezow"] #scene {
position: relative;
display: inline-block;
width: 80rem;
height: 41.5rem;
border-bottom: solid 1rem #905d9b;
animation: scene 2s ease-in-out alternate infinite;
transform-origin: 66rem 41.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .mirror {
position: absolute;
display: block;
top: 0;
left: 13rem;
width: 18rem;
height: 18rem;
border: solid 2.2rem #905d9b;
border-radius: .5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .mirror:before, .codepen-wrapper[data-codepen-id="bpezow"] #scene .mirror:after {
content: "";
position: absolute;
background: #905d9b;
width: .2rem;
transform: rotateZ(45deg);
border-radius: .2rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .mirror:before {
top: .5rem;
left: 3.5rem;
height: 5rem;
box-shadow: 9.5rem 1rem 0 0 #905d9b, 10.5rem .5rem 0 0 #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .mirror:after {
top: 1.5rem;
left: 5.5rem;
height: 10rem;
box-shadow: 1rem 1rem 0 0 #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk {
position: absolute;
background: #905d9b;
top: 26rem;
left: 5.8rem;
width: 33rem;
height: 11rem;
border: solid 2rem #905d9b;
box-shadow: inset 0 0 0 .4rem #9c6da4;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk:before, .codepen-wrapper[data-codepen-id="bpezow"] #scene .desk:after {
content: "";
position: absolute;
background: #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk:before {
top: -4.2rem;
left: -3.3rem;
width: 35.6rem;
height: 1.8rem;
border-radius: .9rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk:after {
top: 9.4rem;
left: -.9rem;
width: 1.8rem;
height: 2.8rem;
border-radius: 0 0 .9rem .9rem;
box-shadow: 29rem 0 0 0 #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk .item {
position: absolute;
background: #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk .item.item-1 {
top: -9.1rem;
left: -1rem;
width: 3.6rem;
height: 4.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk .item.item-1:before {
content: "";
position: absolute;
background: #905d9b;
top: -2.4rem;
left: 1rem;
width: 1.6rem;
height: 2rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk .item.item-2 {
top: -6.6rem;
left: 20.5rem;
width: 3.6rem;
height: 2rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .desk .item.item-3 {
top: -9.1rem;
left: 25.5rem;
width: 3.4rem;
height: 4.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase {
position: absolute;
background: #905d9b;
top: 27.5rem;
left: 42rem;
width: 12.6rem;
height: 12.6rem;
border-top-left-radius: 6.3rem 5rem;
border-top-right-radius: 6.3rem 5rem;
border-bottom-left-radius: 4rem 7.6rem;
border-bottom-right-radius: 4rem 7.6rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase:before, .codepen-wrapper[data-codepen-id="bpezow"] #scene .vase:after {
content: "";
position: absolute;
background: #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase:before {
top: -.8rem;
left: 4.9rem;
width: 2.8rem;
height: 1.6rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase:after {
top: -2rem;
left: 4.3rem;
width: 4rem;
height: 1rem;
border-radius: .5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase .stem {
position: absolute;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase .stem:before {
content: "";
position: absolute;
background: #905d9b;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase .stem.stem-1 {
top: -21rem;
left: .3rem;
width: 6rem;
height: 19rem;
border-top: solid .2rem #905d9b;
border-right: solid .4rem #905d9b;
border-top-right-radius: 6rem 19rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase .stem.stem-1:before {
top: 1rem;
left: .5rem;
width: .8rem;
height: .8rem;
box-shadow: 1rem 1.6rem 0 .2rem #905d9b, 2.4rem -.5rem 0 -.1rem #905d9b, 1.9rem 3.6rem 0 0 #905d9b, 3.6rem 1.2rem 0 .1rem #905d9b, 2.4rem 5.6rem 0 .1rem #905d9b, 4rem 3.4rem 0 .1rem #905d9b, 2.9rem 7.4rem 0 -.1rem #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase .stem.stem-2 {
top: -16rem;
left: 6.4rem;
width: 3rem;
height: 14rem;
border-top: solid .2rem #905d9b;
border-left: solid .6rem #905d9b;
border-top-left-radius: 3rem 14rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .vase .stem.stem-2:before {
top: .5rem;
left: 0;
width: .8rem;
height: .8rem;
box-shadow: 1.8rem 1.2rem 0 .2rem #905d9b, -.6rem 1.8rem 0 0 #905d9b, 1.2rem 3.2rem 0 0 #905d9b, -.8rem 3.6rem 0 -.1rem #905d9b, .8rem 4.8rem 0 0 #905d9b, .8rem 6.8rem 0 .2rem #905d9b, .4rem 8.8rem 0 -.1rem #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet {
position: absolute;
top: 0;
left: 57.5rem;
width: 18.8rem;
height: 40.1rem;
border: solid 1.2rem #905d9b;
border-bottom: none;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .book {
position: absolute;
background: #905d9b;
transform-origin: bottom left;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf {
position: absolute;
left: 0;
width: 16.4rem;
height: 8.8rem;
border-bottom: solid 1.2rem #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-1 {
top: 0;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-1 .book-1 {
top: .7rem;
left: 1.4rem;
width: 1.6rem;
height: 6.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-1 .book-2 {
top: .7rem;
left: 3.4rem;
width: 2.3rem;
height: 6.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-1 .book-3 {
top: .7rem;
left: 9.4rem;
width: 1.4rem;
height: 6.5rem;
transform: rotateZ(-30deg);
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-1 .book-4 {
top: .7rem;
left: 15.2rem;
width: 1.2rem;
height: 6.5rem;
transform: rotateZ(-60deg);
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-2 {
top: 8.8rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-2 .book-1 {
top: .7rem;
left: 2.6rem;
width: .8rem;
height: 6.5rem;
transform: rotateZ(-20deg);
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-2 .book-2 {
top: .7rem;
left: 3.8rem;
width: .8rem;
height: 6.5rem;
transform: rotateZ(-20deg);
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-2 .book-3 {
top: 3.2rem;
left: 11rem;
width: 1.4rem;
height: 4rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-2 .book-4 {
top: .7rem;
left: 12.8rem;
width: 1rem;
height: 6.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .shelf.shelf-2 .book-5 {
top: .7rem;
left: 14.2rem;
width: 1.5rem;
height: 6.5rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer {
position: absolute;
left: 0;
width: 16.4rem;
height: 8.8rem;
border-bottom: solid 1.2rem #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer:before, .codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer:after {
content: "";
position: absolute;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer:before {
top: 1.1rem;
left: 1.1rem;
width: 14.2rem;
height: 5.4rem;
border: solid .2rem #905d9b;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer:after {
background: #905d9b;
top: 3.3rem;
left: 6rem;
width: 4rem;
height: 1rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer.drawer-1 {
top: 17.6rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #scene .cabinet .drawer.drawer-2 {
top: 26.4rem;
}

.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris {
position: absolute;
z-index: 1;
top: 24rem;
left: 14rem;
transform: rotateZ(6deg);
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .hat {
position: absolute;
background: #6a3d73;
width: 5.5rem;
height: 10rem;
border-top-left-radius: 5.5rem 2.5rem;
border-bottom-left-radius: 5.5rem 3rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .hat:before {
content: "";
position: absolute;
background: #4d2b58;
top: -3.8rem;
left: 3.5rem;
width: 5.5rem;
height: 19rem;
border-top-left-radius: 5.5rem 5rem;
border-bottom-left-radius: 5.5rem 14rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .face {
position: absolute;
top: 2.5rem;
left: 9rem;
width: 3.6rem;
height: 9.2rem;
border-style: solid;
border-color: #c2c8d8 #c2c8d8 transparent transparent;
border-width: 7.9rem 3.6rem 1.3rem 0;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .face:before, .codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .face:after {
content: "";
position: absolute;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .face:before {
background: #c2c8d8;
top: -7.9rem;
left: 3.6rem;
width: 1.6rem;
height: 9.2rem;
border-bottom-right-radius: 1.4rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .face:after {
background: #c2c8d8;
top: -9.2rem;
left: .8rem;
width: 2.6rem;
height: 1.3rem;
border-radius: 1.3rem 1.3rem 0 0;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .eye {
position: absolute;
background: #482d4f;
top: 7.5rem;
left: 10rem;
width: 1.2rem;
height: 1.2rem;
border-radius: 1.2rem;
animation: eye 4s 1s linear infinite;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .hair {
position: absolute;
background: #6a3c75;
z-index: -1;
top: -1.5rem;
left: 9rem;
width: 5.2rem;
height: 4rem;
border-top-right-radius: 1.2rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .beard {
position: absolute;
background: #6a3c75;
top: .2rem;
left: 14.2rem;
width: 7.5rem;
height: 10rem;
border-radius: 0 5rem 5rem 0;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .beard:before, .codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .beard:after {
content: "";
position: absolute;
background: #c2c8d8;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .beard:before {
top: 3.5rem;
left: 7rem;
width: 1.7rem;
height: 3.2rem;
z-index: -1;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .beard:after {
top: 6.6rem;
left: 1rem;
width: 1.4rem;
height: 3.4rem;
border-top-right-radius: 1.4rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .shirt {
position: absolute;
background: #603668;
top: -.5rem;
left: 23.5rem;
width: 4.7rem;
height: 12rem;
border-radius: 6rem 0 0 6rem;
box-shadow: inset -.6rem 0 0 0 #603668, inset -.8rem 0 0 0 #864b92, inset -1.2rem 0 0 0 #603668, inset -1.4rem 0 0 0 #864b92, inset -1.8rem 0 0 0 #603668, inset -2rem 0 0 0 #864b92;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .shirt:before, .codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .shirt:after {
content: "";
position: absolute;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .shirt:before {
top: 0;
left: 4.7rem;
width: 8.8rem;
height: 12rem;
border-style: solid;
border-color: transparent transparent transparent #603668;
border-width: 3.9rem 0 3.9rem 8.8rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .shirt:after {
background: #4f2b56;
z-index: -1;
top: 3.6rem;
left: -1rem;
width: 1.5rem;
height: 4.5rem;
border-radius: .8rem 0 0 .8rem;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .arm {
position: absolute;
background: #6a3d73;
top: 3rem;
left: 25rem;
width: 7.5rem;
height: 3.6rem;
border-radius: 1.8rem;
transform: rotateZ(10deg);
transform-origin: left center;
animation: arm-top 2s ease-in-out alternate infinite;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .arm:before, .codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .arm:after {
content: "";
position: absolute;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .arm:before {
background: #6a3d73;
top: 0;
right: -1rem;
width: 3.6rem;
height: 9rem;
border-top-left-radius: 1.8rem 5rem;
border-top-right-radius: 1.8rem 5rem;
border-bottom-left-radius: 1.8rem;
border-bottom-right-radius: 1.8rem;
transform: rotateZ(15deg);
transform-origin: top center;
box-shadow: 0 1rem 0 0 #c2c8d8;
animation: arm-bottom 2s ease-in-out alternate infinite;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .arm:after {
background: #c2c8d8;
z-index: -1;
right: 1rem;
bottom: -6rem;
width: 7.5rem;
height: 2rem;
border-top-left-radius: 4rem 1.6rem;
border-bottom-right-radius: 1rem;
transform: rotateZ(-15deg);
transform-origin: right center;
animation: hand 2s ease-in-out alternate infinite;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .pants {
position: absolute;
background: #ba85cb;
top: 3.4rem;
left: 37rem;
width: 19rem;
height: 4.1rem;
border-left: solid 1.4rem #4d2957;
border-right: solid 3.2rem #4e2c55;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .pants:before {
content: "";
position: absolute;
top: 2rem;
left: .2rem;
width: 14rem;
height: .2rem;
border-top: dashed .2rem #a661bc;
}
.codepen-wrapper[data-codepen-id="bpezow"] #chuck-norris .shoes {
position: absolute;
background: #4e2c55;
top: 7.5rem;
left: 49rem;
width: 7rem;
height: 3.5rem;
border-top-left-radius: 4rem 3.3rem;
transform: rotateZ(-6deg);
transform-origin: top center;
animation: shoes 2s ease-in-out alternate infinite;
}

@keyframes scene {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(-7deg);
}
}
@keyframes eye {
0% {
transform: scale(1, 1);
}
3% {
transform: scale(0.2, 1);
}
6% {
transform: scale(1, 1);
}
9% {
transform: scale(0.2, 1);
}
12% {
transform: scale(1, 1);
}
}
@keyframes arm-top {
0% {
transform: rotateZ(10deg);
}
100% {
transform: rotateZ(38deg);
}
}
@keyframes arm-bottom {
0% {
transform: rotateZ(15deg);
}
100% {
transform: rotateZ(-12deg);
}
}
@keyframes hand {
0% {
transform: rotateZ(-15deg);
}
100% {
right: -2.8rem;
bottom: -4.6rem;
transform: rotateZ(-52deg);
}
}
@keyframes shoes {
0% {
transform: rotateZ(-6deg);
}
100% {
transform: rotateZ(-13deg);
}
}